<template>
    <div class="warpper-box">
       <form-create 
          class="custom-select"
          v-model="params.fApi" 
          :rule="params.rule" 
          :option="params.option" 
          @btn-search-click="loadTable(true)"
          @btn-reset-click="reset"/>
          <a-table 
        :columns="table.columns" 
        :pagination="table.pagination" 
        @change="handleTableChange"
        rowKey="idx"
        :data-source="table.loadData">
          <span slot="action" slot-scope="text, record">
            <a @click="detail(record)">详情</a>
          </span>
          <span slot="parkName" slot-scope="text, record">
            <a-popover title="关联园区名称" trigger="hover">
                <template #content>
                <p style="margin: 0;">{{record.parkName}}</p>
                </template>
                <a-button style="padding: 0;color:#000" type="link">{{record.parkName | filterMore(8)}}</a-button>
            </a-popover>
          </span>
          <span slot="enterpriseName" slot-scope="text, record">
            <a-popover title="企业名称" trigger="hover">
                <template #content>
                <p style="margin: 0;">{{record.enterpriseName}}</p>
                </template>
                <a-button style="padding: 0;color:#000" type="link">{{record.enterpriseName | filterMore(8)}}</a-button>
            </a-popover>
          </span>
        </a-table>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
    PARAMS_BILLING,
    COLUMNS_BILLING_COMANY,
    COLUMNS_BILLING_PARK,
    COLUMNS_BILLING_ADMIN,
    OPTION_BLOCK,
    OPTION_INLINE
} from './form'
import { 
  allGetBillingParkList
} from '@/api/manage/billing'
export default {
  name: 'billing',
  data () {
    return {
      params:{
        fApi:{},
        rule:PARAMS_BILLING,
        option:OPTION_INLINE
      },
      table:{
        columns:[],
        loadData:[],
        pagination:{
          current:1,
          pageSize: 10,
          total:0,
          showSizeChanger: true,
					showQuickJumper: true,
          pageSizeOptions: ["10", "20", "50", "100"],
          showTotal: total => `共有 ${total} 条数据`,
        }
      },
    }
  },
  filters: {
      filterMore (value,num) {
      if (!value) return ''
      if (value.length > num) {
          return value.slice(0,num) + '...'
      }
      return value
      }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  created () {
    this.initTable();
  },
  methods: {
    initTable(){
      if(this.userInfo.type ===2){
        this.table.columns = COLUMNS_BILLING_COMANY;
        this.$nextTick(()=>{
          this.params.fApi.updateRules({'name':{title:'园区名称'}})
        })
      }else if(this.userInfo.type ===3){
        this.table.columns = COLUMNS_BILLING_PARK;
         this.$nextTick(()=>{
          this.params.fApi.updateRules({'name':{title:'企业名称'}})
        })
      }else if(this.userInfo.type ===1){
        this.table.columns = COLUMNS_BILLING_ADMIN;
        this.$nextTick(()=>{
          this.params.fApi.updateRules({'name':{title:'企业名称'}})
        })
      }
       this.loadTable(true);
    },
    async loadTable(flag){
       let params = {};
      if(JSON.stringify(this.params.fApi) !== "{}"){
        const formData = this.params.fApi.formData();
        params.name = formData.name;
      }
      if(flag){
        this.table.pagination.current = 1;
        this.table.pagination.pageSize = 10;
      }
      params.pageNum = this.table.pagination.current;
      params.pageSize = this.table.pagination.pageSize;
      const {code,data} = await allGetBillingParkList(params);
      if(code ==='1'){
        this.table.loadData = data.content;
        this.table.loadData.forEach((v,i)=>{
          v.idx = i++;
        })
        this.table.pagination.total = data.total || 0;
      }
    },
    handleTableChange(pagination){
      this.table.pagination.current = pagination.current;
      this.table.pagination.pageSize = pagination.pageSize;
      this.loadTable(false);
    },
    detail(item){
      if(this.userInfo.type === 1){
        this.$router.push({name:'financeBillingParkDetailCode',query:{enterpriseId:item.enterpriseId,parkId:item.parkId}});
      }else if(this.userInfo.type === 2){
        this.$router.push({name:'financeBillingEnterpriseDetailCode',query:{parkId:item.parkId}});
      }else if(this.userInfo.type === 3){
        this.$router.push({name:'financeBillingParkDetailCode',query:{parkId:item.parkId,enterpriseId:item.enterpriseId}});
      }
    },
    reset(){
      this.params.fApi.resetFields();
      this.loadTable(true);
    }
  }
}
</script>
